<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>


	<canvas id="canvas" width="800" height="500px" style="border: 1px solid #ccc"></canvas>

	<script type="text/javascript">
		
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		ctx.beginPath();

		ctx.moveTo(50,20);
		ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
		ctx.stroke();

		ctx.fillStyle = "blue";
		ctx.fillRect(50,20,10,10)
		ctx.fillRect(50,100,10,10)
		

		ctx.fillStyle = 'red';
		ctx.fillRect(150,60,10,10)
		ctx.fillRect(230,30,10,10)

	</script>
</body>
</html>